<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串基本函数使用</title>
    <style>
        p{
            margin: 0;
        }
    </style>
</head>
<body>
    <input type="text" name="password">
    <span></span>
    <script>
        let xiasnn = 'xiaSnn';
        // 长度
        console.log(xiasnn.length);
        // 大写
        console.log(xiasnn.toUpperCase());
        // 小写
        console.log(xiasnn.toLocaleLowerCase());

        //去空
        let xiaxia = '   xiaxia    ';
        console.log(xiaxia.length);
        console.log(xiaxia.trim().length);


        let hd = document.querySelector('[name = "password"]');
        hd.addEventListener('keyup',function () {
            this.value = this.value.trim();
            let span = document.getElementsByTagName('span');
            let error = '';
            if(this.value.length < 5){
                error = '密码长度小于五位';
            }
            span[0].innerHTML=error;
        })

        let xianan = 'xianan';
        console.log(xianan.charAt());
        console.log(xianan[0]);
        for(let i = 0; i < xianan.length; i++){
            let p = document.createElement('p');
            p.innerHTML = xianan[i];
            p.style.fontSize = (i+1) * 10 + 'px';
            document.body.append(p);
        }
    </script>
</body>
</html>